//<template>
    <div>
        <section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="index.html"><i class="fas fa-shopping-bag primary-color mr-1"></i><router-link to="/">{{ $t('m.name') }}</router-link> </a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{ $t('m.home') }} <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.shop') }} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ $t('m.pages') }} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{ $t('m.contact') }}</a></li>
					<li class="nav-item dropdown">
						<!-- 搜索 -->
						<Search v-model="work" @search="search"></Search>
					
					</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">{{ total_num }}</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>共{{ total_num }}件商品 <span class="emphasis">共计 ${{ total_price}}</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row" v-for="(item,index) in cartlist" :key="index">
										<div class="col-3">
											<img :src="adminurl+'/static/upload/'+item.img" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">{{item.name}}</a></h6>
											<span class="text-muted">{{item.num}}x</span>
											<span class="emphasis">${{item.price}}</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
				<div v-if="username == null"><router-link to="/register">{{ $t('m.register') }}</router-link>/ <router-link to="/login">{{ $t('m.login') }}</router-link></div>
				<div v-else>{{ $t('m.welcome') }} <router-link to="/myprofile">{{ username }}</router-link> &nbsp;<a href="#" @click="loginout">{{ $t('m.logout') }}</a></div>
			</div>
			<div>
				<!-- 切换中英文 -->
				点击切换中英文: <a v-if="c == 'c'" @click='changecn' href="#">中文</a><a v-if="e == 'e'" @click="changeen" href="#">English</a>
			</div>
		</nav>
	</section>
    </div>
</template>

<script>
import {config} from '../config'

export default {
	data(){
		return{
			username:localStorage.getItem('username'),
			uid:localStorage.getItem('uid'),
			// 语言值
			c:"",
			e:"",
			text:"",
			work:"",
			adminurl:config['adminurl'],
		}
	},
	props:["total_num","total_price","cartlist"],
	mounted(){
		// 判断语言
		var lang = localStorage.getItem('lang')
		if(lang == 'zh'){
			this.c = 'c'
			this.$i18n.locale = 'zh'
		}else if(lang == 'en'){
			this.e = 'e'
			this.$i18n.locale = 'en'
		}else{
			this.c = 'c'
			localStorage.setItem('lang','zh')
		}
		
	},
	methods:{
		// 搜索
		search(){
			
			// this.$router.push({'path':"/search","query":{'work':this.work}})
			window.location.href = 'http://127.0.0.1:8080/search?work='+this.work
		},
		loginout:function(){
			localStorage.removeItem('username');
			localStorage.removeItem('uid')
			this.$router.push('/login')
		},
		changecn(){
			this.e = 'e'
			this.$i18n.locale = 'en'
			this.c = ''
			localStorage.setItem('lang','en')
		},
		changeen(){
			this.c = 'c'
			this.$i18n.locale = 'zh'
			this.e = ''
			localStorage.setItem('lang','zh')
		}
	}
}
</script>

<style>

</style>
